<template>
  <div class="line-chart-box">
    <div class="header">
      <div class="title">词云图</div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["lineChart"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="line-chart" ref="line-chart">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-15 09:39:24
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
import "@/utils/echarts-wordcloud.min.js"
export default {
  name: "",
  data() {
    return {
      myCharts: null,
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
  },
  destroyed() {
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const lineChart = document.querySelector(".line-chart")
      this.myCharts = this.$echarts.init(lineChart)
      // let nameList = [
      //   "亲切",
      //   "疑难解答",
      //   "启发",
      //   "友好",
      //   "扩展思维",
      //   "思考能力",
      //   "知识",
      //   "关心",
      //   "平易近人",
      //   "认真负责",
      // ]
      // let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120, 150]

      // let colorList = ["#FAAD14", "#13C2C2", "#14A8FF", "#23D688", "#397EF0"]
      // let fontSizeList = [
      //   this.$fitChartFont(12),
      //   this.$fitChartFont(14),
      //   this.$fitChartFont(16),
      //   this.$fitChartFont(18),
      // ]
      // let data = []

      // nameList.map((item, index) => {
      //   let i = parseInt(index / 4)
      //   data.push({
      //     name: item,
      //     value: valueList[i],
      //     label: {
      //       color: colorList[i],
      //       fontSize: fontSizeList[i],
      //     },
      //   })
      // })

      const option  = {
        grid: {
          show: true,
          backgroundColor: 'transparent',
          opacity: 0.3,
          borderWidth: '0',
          top: `${this.$fitChartFont(220)}`,
          bottom: '0'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        xAxis: [
          // 日期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(130),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  color: 'white',
                  fontSize: this.$fitChartFont(18)
                }
              }
            },
            nameTextStyle: {
              color: 'white',
            },
            data: ["25日","26日","27日","28日","29日","30日","31日"]
          },
          // 星期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(110),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  color: 'white',
                  fontSize: this.$fitChartFont(14)
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: this.$fitChartFont(19)
            },
            data: ["周一","周二","周三","周四","周五","周六","周日"]
          },
          // 天气图标
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(20),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function(value, index) {
                return '{' + index + '| }\n{b|' + value + '}'
              },
              rich: {
                0: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                1: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                2: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/阴.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                3: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                4: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/多云.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                5: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                6: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                b: {
                  color: 'white',
                  fontSize: this.$fitChartFont(12),
                  lineHeight: this.$fitChartFont(30),
                  height: this.$fitChartFont(20)
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: this.$fitChartFont(19)
            },
            // data: this.weatherdata.weather
            data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
          }
        ],
        yAxis: {
          type: 'value',
          show: false,
          axisLabel: {
            formatter: '{value} °C',
            color: 'white'
          }
        },
        series: [
          {
            name: '最高气温',
            type: 'line',
            data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
            symbol: 'emptyCircle',
            symbolSize: this.$fitChartFont(10),
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#C95843'
              }
            },
            label: {
              show: true,
              position: 'top',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          },
          {
            name: '最低气温',
            type: 'line',
            data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
            symbol: 'emptyCircle',
            symbolSize: this.$fitChartFont(10),
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: 'blue'
              }
            },
            label: {
              show: true,
              position: 'bottom',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          }
        ]
      }

      if (this.myCharts) {
        this.myCharts.setOption(option)
      }
    },
    // 图表socket数据更新
    updateData() {
      // const option = {
      // }
      // this.myCharts.setOption(option)
      // this.myCharts.resize()
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      // let nameList = [
      //   "亲切",
      //   "疑难解答",
      //   "启发",
      //   "友好",
      //   "扩展思维",
      //   "思考能力",
      //   "知识",
      //   "关心",
      //   "平易近人",
      //   "认真负责",
      // ]
      // let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120, 150]

      // let colorList = ["#FAAD14", "#13C2C2", "#14A8FF", "#23D688", "#397EF0"]
      // let fontSizeList = [
      //   this.$fitChartFont(12),
      //   this.$fitChartFont(14),
      //   this.$fitChartFont(16),
      //   this.$fitChartFont(18),
      // ]
      // let data = []

      // nameList.map((item, index) => {
      //   let i = parseInt(index / 4)
      //   data.push({
      //     name: item,
      //     value: valueList[i],
      //     label: {
      //       color: colorList[i],
      //       fontSize: fontSizeList[i],
      //     },
      //   })
      // })

      const option  = {
        grid: {
          show: true,
          backgroundColor: 'transparent',
          opacity: 0.3,
          borderWidth: '0',
          top: `${this.$fitChartFont(220)}`,
          bottom: '0'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false
        },
        xAxis: [
          // 日期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(130),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  color: 'white',
                  fontSize: this.$fitChartFont(18)
                }
              }
            },
            nameTextStyle: {
              color: 'white',
            },
            data: ["25日","26日","27日","28日","29日","30日","31日"]
          },
          // 星期
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(110),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: [
                '{a|{value}}'
              ].join('\n'),
              rich: {
                a: {
                  color: 'white',
                  fontSize: this.$fitChartFont(14)
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: this.$fitChartFont(19)
            },
            data: ["周一","周二","周三","周四","周五","周六","周日"]
          },
          // 天气图标
          {
            type: 'category',
            boundaryGap: false,
            position: 'top',
            offset: this.$fitChartFont(20),
            zlevel: this.$fitChartFont(100),
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function(value, index) {
                return '{' + index + '| }\n{b|' + value + '}'
              },
              rich: {
                0: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                1: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                2: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/阴.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                3: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                4: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/多云.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                5: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                6: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    image: 'https://d.scggqx.com/forecast/img/小雨.png'
                  },
                  height: this.$fitChartFont(40),
                  width: this.$fitChartFont(40)
                },
                b: {
                  color: 'white',
                  fontSize: this.$fitChartFont(12),
                  lineHeight: this.$fitChartFont(30),
                  height: this.$fitChartFont(20)
                }
              }
            },
            nameTextStyle: {
              fontWeight: 'bold',
              fontSize: this.$fitChartFont(19)
            },
            // data: this.weatherdata.weather
            data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
          }
        ],
        yAxis: {
          type: 'value',
          show: false,
          axisLabel: {
            formatter: '{value} °C',
            color: 'white'
          }
        },
        series: [
          {
            name: '最高气温',
            type: 'line',
            data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
            symbol: 'emptyCircle',
            symbolSize: this.$fitChartFont(10),
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#C95843'
              }
            },
            label: {
              show: true,
              position: 'top',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          },
          {
            name: '最低气温',
            type: 'line',
            data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
            symbol: 'emptyCircle',
            symbolSize: this.$fitChartFont(10),
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: 'blue'
              }
            },
            label: {
              show: true,
              position: 'bottom',
              // color: 'white',
              formatter: '{c} °C'
            },
            lineStyle: {
              width: 1,
              // color: 'white'
            },
            areaStyle: {
              opacity: 1,
              color: 'transparent'
            }
          }
        ]
      }

      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.lineChart) {
        this.$router.push("/lineChartPage")
        this.changeFullScreenStatus({ type: "lineChart", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "lineChart", value: false })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.line-chart,
.line-chart-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

